<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<title>Login : Millennium Management System</title>
<meta name="description" content="" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/notifIt.css" />
<!-- <link rel="stylesheet" href="../css/bootstrap.css"> -->

<script type="text/javascript" src="js/lib/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/lib/notifIt.js"></script>

<script>
	jQuery(function($) {
		$('#login').submit(
				function() {
					var valid = true;
					var errormsg = 'This field is required!';
					var errorcn = 'error';
					$('.' + errorcn, this).remove();
					$('.required', this).each(
							function() {
								var parent = $(this).parent();
								if ($(this).val() == '') {
									var msg = $(this).attr('title');
									msg = (msg != '') ? msg : errormsg;
									$('<span class="'+ errorcn +'">' + msg + '</span>').appendTo(parent).fadeIn('fast')
											.click(function() {
												$(this).remove();
											});
									valid = false;
								}
								;
							});
					return valid;
				});
		
	});
	
// 	var  _notif=function(){
	    
// 	    notif({
// 		    type: "error",
// 		    msg: " <font color'red'>Username or Password Incorrect</font>",
// 		    position: "center",
// // 		    width: 450,
// 		    time: 1200
// // 		    autohide: false
// 		  });
	    
// 	};
	
	
</script>

</head>
<body>
<!-- 	<form method="post" name="login" action="./home/index" id="login"> -->
	<form method="post" name="login" action="j_spring_security_check" id="login">

		<h1>
			<strong><i class="fa fa-building-o fa-lg"></i> Millennium Management System</strong>
		</h1>
<!--     <p class="register">Not a member? <a href="#">Register here!</a></p> -->
<!-- 		<div> -->
			<c:if test="${param.login_error == 1}">
<!-- 			      <font color="red"> -->
<%-- 			        <c:out value="Username or Password Incorrect !"/> --%>
<!-- 			      </font> -->
			      <script type="text/javascript">
				      $(document).ready(function() {
						if('${param.login_error == 1}') {
						    notif({
							    type: "error",
							    msg: " <font color'red'>Username or Password Incorrect</font>",
							    position: "center",
							    time: 1200
							  });
						}
					});
			      </script>
			      
			</c:if>
<!-- 		</div> -->
		<div>
			<label for="j_username"><i class="fa fa-user fa-lg"></i>
			Username</label> <input type="text" id="j_username" name="j_username" 
			class="input-login field required" title="Please provide your username" value=""/>
		</div>

		<div>
			<label for="j_password"><i class="fa fa-lock fa-lg"></i>&nbsp; Password</label> <input type="password" id="j_password" name="j_password"
				class="field required" title="Password is required" value=""/>
		</div>
<p>
		<table border="0" >
			<tbody>
				<tr>
					<td width="70%">&nbsp;</td>
					<td style="text-align: right;"><input checked="checked" name="langRadios" type="radio" value="th" /></td>
					<td >&nbsp;<img src="images/flag-th.png" style="width:25px" /></td>
					<td style="text-align: right;" width="25px"><input name="langRadios" type="radio" value="en" /></td>
					<td >&nbsp;<img src="images/flag-en.png" style="width:25px" /></td>
					<td width="30px">&nbsp;</td>
				</tr>
			</tbody>
		</table>
</p>

<!-- 		<p class="forgot"><a href="#">Forgot your password </a></p> -->

		<div class="submit" align="right">
			<button type="submit" id="btn_submit" name="btn_submit"><strong>Log in</strong></button>
		</div>

		<p class="back" >Software Solution & Integration <i class="fa fa-globe fa-lg"></i> Copyright 2014</p>
		
<!-- 		<p > -->
<!-- 			<table class="back" cellpadding="0" cellspacing="0" border="0" -->
<!-- 				style="width: 100%;"> -->
<!-- 				<tr> -->
<!-- 					<td align="left"><a href="../pr/add"> TH </a>&nbsp;/&nbsp;<a -->
<!-- 						href="../pr/add"> EN </a></td> -->
<!-- 					<td align="right">LeoSoft © Copyright 2014 Version 1.0</td> -->
<!-- 				</tr> -->
<!-- 			</table> -->
<!-- 		</p> -->
	</form>

</body>
</html>
